<template>
  <view class="home">
    <view class="text1" style=" ">恭喜您已成功参与传播达人推广活动</view>
    <view class="text2" style=" ">您参与的作品是</view>
    <view class="player-container" :class="{show:!showCard}">
      <video class="video"
        ref="video"
        :controls="false"
        show-mute-btn="true"
        autoplay="true"
        muted="true"
        objectFit ="contain"
         :src="shop.url" />
      <view class="message" v-show="showCard" >
        <view class="name">{{cardInfo.title}}</view>
        <view class="time">{{cardInfo.created_at}} 至 {{cardInfo.expire_at}}</view>
        <button v-show="cardInfo.is_use===5"  class="btn" type="default" @click="getCard(cardInfo.id)">领取优惠券
        </button>
        <button  v-show="cardInfo.is_use!==5" class="btn yet" type="default" >已领取
        </button>
      </view>
    </view>
    <view class="desc">
      <rich-text :nodes="shop.desc||shop.title"></rich-text>
    </view>
     <!-- 我的券和一键领取  -->
    <view class="tools">
      <button @tap='handleurl' class="btn my" type="default">我的卡券
      </button>
      <button  class="btn one" type="default" @click="getCardAll">一键领取
        </button>
    </view> 
    <!-- <view class="article" v-html="content"></view> -->
  </view>
</template>

<script>
// id=160&user_id=1271&tmpNumber=0&hint_him=
import { getInfo, checkCard, cardList} from '../../api/content'
	export default {
		data() {
			return {
        shop: {url:''},
        userParam: { },
        cardInfo: { },
        showCard: '' //是否展示领取卡券
    	}
		},
	  async	onLoad() {
      // 更改视频播放控制工具
      window.onload=()=>{
        document.querySelector('video').setAttribute('controls',"controls")
      }
      // 截取信息
    await this.getUrl()
    await this.getShopInfo();
		},
		methods: {
      // 获取商家信息视频文案
     async getShopInfo(){
       uni.setStorageSync('user',{...this.userParam})
      //  console.log(uni.getStorageSync('user'));
       uni.showLoading({
          title: '加载中'
        });
      const {video,desc,card_random,card_group,title} = await getInfo(this.userParam)
      //  const {video,desc} =await this.$axios.get('getActivityInfo',{params:{...this.userParam}})
        // console.log(res);
        this.shop.url=video
        this.shop.desc=desc
        this.shop.title=title
        this.showCard = card_group.length>0
        if (this.showCard) {
          let i = card_random===1 ? 0 : this.randomNum(card_group.length)
          this.getCardInfo(card_group[i])
        }
      
        uni.hideLoading();
      },
      // 获取卡片信息
      async getCardInfo(id){
        const res = await checkCard({
          activity_id:this.userParam.id,
          user_id:this.userParam.user_id
          })
          this.cardInfo = res[res.findIndex(item=>item.id == id)]
          console.log(this.cardInfo,id);
      },
      // 跳转
      handleurl(){
        uni.navigateTo({
          url:'/pages/user/cardlist',
        })
      },
      // 领卡
      async getCard(e){ 
        // uni.showLoading({
        //   title: '领取中'
        // });
        const res = await cardList({
          activity_id:this.userParam.id,
          user_id: this.userParam.user_id,
          get_card_id: e
          })
          this.cardInfo.is_use=0
        // uni.hideLoading();
        uni.showToast({
          title: res.data.msg,
          icon: 'success',
          mask: true
        })

      },
      async getCardAll(){
        // uni.showLoading({
        //   title: '领取中'
        // });
          const res = await cardList({
          activity_id:this.userParam.id,
          user_id: this.userParam.user_id,
          })
        // console.log(res);
        this.cardInfo.is_use=0
        // uni.hideLoading( );
        uni.showToast({
          title: res.data.msg,
          icon: 'success',
          mask: true
        })
      },
      // 随机数
      randomNum(a){
        return parseInt(Math.random()*a) 
      },
      // 截取url信息
      getUrl(){
        let url = window.location.hash;
        let tmp=url.split('?')[1].split('&')
          for (let index = 0; index < tmp.length; index++) {
          this.userParam[tmp[index].split('=')[0]]=tmp[index].split('=')[1];
        }
        // console.log(this.userParam);
      }
		},
    // 
    onPullDownRefresh() {
      this.shop.url=''
        this.getShopInfo()
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    },
    onShow() {
      if (this.$refs.video) {
      this.$refs.video.play()
      }
      
    }
	}
</script>

<style lang="scss" scoped>
$text1-color:#9B59FF; //标题字体颜色
// 页面样式
.home {
  padding: 62 / 375 * 100vw 0 0;
  color: #FFFFFF;
  .text1,.text2{
    text-align: center;
    margin-bottom: 6 / 375 * 100vw;
    font-size: 32rpx
  }
  .text1 {
    color: $text1-color;
    font-weight: bold
  }
}
// 内容
.player-container {
  background-color: #fff;
  border: 1px #000 solid;
  margin: 8 / 375 * 100vw  16 / 375 * 100vw;
  margin-top: 16 / 375 * 100vw;
  height: 336 / 375 * 100vw;
  // display: flex;
  // flex-direction: column;
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
  .video{
    width: 343 / 375 * 100vw;
    height: 193 / 375 * 100vw;
  }
  .message { 
    padding: 17 / 375 * 100vw 16 / 375 * 100vw;
    text-align: left;
    display: flex;
    flex-direction: column;
    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      line-height: 44rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-bottom: 7 / 375 * 100vw;
    }
    .time{
      font-size: 24rpx;
      font-weight: 500;
      color: #676767;
      margin-bottom: 15 / 375 * 100vw;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .btn {
      width: 311 / 375 * 100vw;
      height: 50 / 375 * 100vw;
      font-size: 15 / 375 * 100vw;
      font-weight: bold;
      color: #FFFFFF;
      border-radius: 100px;
      background-image: linear-gradient(to right, $bg-color-l , $bg-color-r);
    }
    .yet {
      background-image: linear-gradient(to right, #ccc , #ccc);
    }
  }
}
  .show {
    .video{
    width: 343 / 375 * 100vw;
    height: 336 / 375 * 100vw;
    }
  }
// 文案
.desc {
  background-color: #121823;
  border-radius: 16px;
  // color: #000;
  font-size: 32rpx;
  margin: 0 16 / 375 * 100vw;
  min-height: 90 / 375 * 100vw;
  max-height: 110 / 375 * 100vw;
  text-align: center;
  overflow-y: auto;
}

.btn {
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  font-weight: bold;
}
.color {
  background: #15151f;
}
.selectColor {
  background: #fe2b53;
}
.tools{
  display: flex;
  justify-content:space-between;
  width: 343 / 375 * 100vw;
  margin: 4vw auto 0;
  .btn{
    width: 164 / 375 * 100vw;
    height: 48 / 375 * 100vw;
  }
  .my{
    color: #12151A;
  }
  .one {
    background-image: linear-gradient(to right, $bg-color-l , $bg-color-r);
    color: #FFFFFF;
  }
}
</style>
